<script setup lang='ts'>
import { reactive } from 'vue';
import { loginApi } from '@/api/user';
import { postAction } from '@/api/common';
import { AxiosResponse } from 'axios';
import { StatusEnum } from '@/common/status.enum';
import { Local } from '@/utils/storage';
import router from '@/router';
import { Md5 } from 'ts-md5';

const state = reactive({
  ruleForm: {
    username: '',
    password: '',
  }
});
const clickLogin = () => {
  const formData = {
    username: state.ruleForm.username,
    password: Md5.hashStr(state.ruleForm.password),
  }
  postAction(loginApi, formData).then((res: AxiosResponse) => {
    if (res.code === StatusEnum.SUCCESS) {
      Local.set('token', res.data.token);
      Local.set('userInfo', res.data.userInfo);
      router.push({ path: '/home' });
    }
  });
}
</script>

<template>
  <div class='login-container h100'>
    <div class='title'>
      <img class="logo-img" src="@/assets/logo.png" alt="">
      <img class="logo-text-img" src="@/assets/logo-text.png" alt="">
    </div>
    <div class='form-box'>
      <van-form @submit='clickLogin'>
        <van-cell-group inset>
          <van-field
              v-model="state.ruleForm.username"
              required
              label="账号"
              placeholder="请输入账号"
              :rules='[{ required: true, message: "请输入账号" }]'
          />
          <van-field
              v-model="state.ruleForm.password"
              required
              type='password'
              label="密码"
              placeholder="请输入密码"
              :rules='[{ required: true, message: "请输入密码" }]'
          />
        </van-cell-group>
        <van-button class='login-btn' block round type="primary" native-type="submit">登录</van-button>
      </van-form>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.login-container{
  padding: 20px;
  height: calc(100vh - 40px);
  background: url("@/assets/img/login-bg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .title{
    margin-top: 10vh;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo-img{
      width: 80px;
      margin-right: 20px;
    }
    .logo-text-img{
      width: 240px;
    }
  }
  .form-box{
    padding: 20px;
    .login-btn{
      margin-top: 20px;
    }
  }
}
</style>
